import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './RangeDatePick.less';
import lodash from 'lodash';

export default (props: any) => {
  const { id, onChange, disabled, value } = props;
  const dateFormat = 'YYYY/MM/DD';
  const [Datevalue, setDatevalue] = useState([null, null]);

  const HandleOnChange = (_: any, dateString: any) => {
    onChange && onChange(dateString);
    setDatevalue(
      dateString
        ? [dayjs(dateString[0], dateFormat), dayjs(dateString[1], dateFormat)]
        : [null, null],
    );
  };

  useEffect(() => {
    if (Array.isArray(value))
      setDatevalue([dayjs(value[0], dateFormat), dayjs(value[1], dateFormat)]);
  }, [value]);

  return (
    <DatePicker.RangePicker
      className={styles.RangeDatePick}
      id={id}
      onChange={HandleOnChange}
      disabled={disabled}
      value={Datevalue}
      format={dateFormat}
    />
  );
};
